<template>
  <div>
    <el-main>
      <div class="form_title">发放优惠卷</div>
      <div class="form_content">
        <el-form
          ref="form"
          label-width="80px"
          :model="model"
        >
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="金额">
                <el-input
                  v-model="model.money"
                  readonly="readonly"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="订单限额">
                <el-input
                  v-model="model.orderMin"
                  readonly="readonly"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="失效日期">
                <el-input
                  v-model="model.endTime"
                  readonly="readonly"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="发放群体">
                <el-radio-group v-model="model.memberType">
                  <el-radio :label="0">指定会员</el-radio>
                  <el-radio :label="1">消费金额</el-radio>
                  <el-radio :label="2">所有会员</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20" v-if="model.memberType==0">
            <el-col :span="24">
              <el-form-item label="会员" prop="memberName">
                <el-input
                  v-model="model.memberName"
                  readonly="readonly"
                  @click.native="handleMemberSelect"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20" v-if="model.memberType==1">
            <el-col :span="24">
              <el-form-item label="消费金额" prop="totalMoney">
                <el-input-number v-model="model.totalMoney" :min="100" placeholder="消费金额"></el-input-number>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </el-main>
    <el-dialog
      :title="memberDialogTitle"
      :visible.sync="memberDialogOpen"
      width="650px"
      :close-on-click-modal="false"
    >
      <el-table
        ref="memberDialogTable"
        :data="memberDialogTableData.records"
        :border="true"
        style="width: 100%"
        size="small"
        highlight-current-row
        @current-change="handleMemberDialogTableCurrentChange"
      >
        <el-table-column
          prop="name"
          label="名称"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="phone"
          label="电话"
          show-overflow-tooltip
        ></el-table-column>
      </el-table>
      <div class="pagination">
        <pagination
          v-show="memberDialogTableData.total > 0"
          :total="memberDialogTableData.total"
          :page.sync="memberDialogTableData.current"
          :limit.sync="memberDialogTableData.size"
          @pagination="searchMember"
        />
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click="handleMemberConfirm"
          size="small"
        >确 定</el-button
        >
        <el-button @click="handleMemberCancel" size="small">取 消</el-button>
      </div>
    </el-dialog>
    <el-footer>
      <el-button
        icon="el-icon-close"
        size="small"
        @click="$router.go(-1)"
      >取消</el-button
      >
      <el-button
        type="primary"
        icon="el-icon-check"
        size="small"
        @click="handleGrant"
      >发放</el-button
      >
    </el-footer>
  </div>
</template>

<script>
  import {grantCoupon,viewCoupon} from "@/api/order/coupon";
  import {ApiError} from "@/utils/errors";
  import {parseTime} from "@/utils/common";
  import {pageMember} from "@/api/member/member";

  export default {
    data() {
      return {
        memberDialogTitle: "选择会员",
        memberDialogOpen: false,
        memberDialogTableData: {
          records: [],
          total: 0,
          current: 1,
          size: 10
        },
        member: null,
        model: {
          id: null,
          memberType: 0,
          memberId: null,
          memberName: null,
          endTime: null,
          totalMoney: 100
        }
      }
    },
    created() {
      const id = this.$route.query.id;
      this.get(id);
    },
    methods: {
      searchMember(){
        const params = {};
        params.status = 1;
        pageMember(params).then(res => {
          if (res.status == 200) {
            if (!res.data.success) {
              return this.$message.error(ApiError.msg(res.data.message));
            }
            const data = res.data.data;
            this.memberDialogTableData.records = data.records;
            this.memberDialogTableData.total = data.total;
            this.memberDialogTableData.current = data.current;
            this.memberDialogTableData.size = data.size;
          }
        });
      },
      handleMemberDialogTableCurrentChange(row){
        this.member = row;
      },
      handleMemberSelect(){
        this.searchMember();
        this.memberDialogOpen = true;
      },
      handleMemberConfirm(){
        this.model.memberId = this.member.id;
        this.model.memberName = this.member.name;
        this.memberDialogOpen = false;
      },
      handleMemberCancel(){
        this.memberDialogOpen = false;
      },
      get(id){
        const params = {id:id};
        viewCoupon(params).then(res => {
          if (res.status == 200) {
            if (!res.data.success) {
              return this.$message.error(ApiError.msg(res.data.message));
            }
            this.model.id = res.data.data.id;
            this.model.money = res.data.data.money/100;
            this.model.orderMin = res.data.data.orderMin/100;
            this.model.endTime = parseTime(res.data.data.endTime);
          }
        });
      },
      handleGrant() {
        const that = this;
        this.$refs.form.validate(valid => {
          if (!valid) {
            return;
          }
          const params = {
            id: this.model.id,
            memberType: this.model.memberType,
            memberId: this.model.memberId,
            totalMoney: this.model.totalMoney*100
          }
          grantCoupon(params).then(res => {
            if (res.status == 200) {
              if (!res.data.success) {
                return this.$message.error(ApiError.msg(res.data.message));
              }
              this.$message.success("发放优惠卷成功");
              that.$router.go(-1);
            }
          });
        });
      }
    }
  }
</script>

<style lang="scss" scoped>
  .form_title {
    padding-bottom: 20px;
    font-size: 16px;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.85);
  }
  .form_content {
    padding-right: 16px;
  }
  .input_suffix {
    display: inline-block;
    padding: 0 6px;
  }
  .el-divider {
    margin: 6px 0 16px;
  }
  .add_new_batch {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 16px;
    height: 45px;
    border: 1px dashed #d9d9d9;
    cursor: pointer;
    color: #8c939d;
  }
  .batch_block {
    margin-top: 16px;
  }
  .batch_block:first-child {
    margin-top: 0;
  }
  @import "@/styles/full-form";
  @import "@/styles/common-table";
</style>
